import { memo, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchHomeDataAction } from "@/store/modules/home";
import { HomeWapper } from "./style";
import Section from "./comps/section";
import { isEmptyObject } from "@/utils";
import LongFor from "./comps/longfor";
import { setHeaderConfigAction } from "@/store/modules/main";

const Home = memo(() => {
  const dispatch = useDispatch();
  const { goodPriceInfo, highScoreInfo, discountInfo, recommendInfo, longForInfo, plusInfo } = useSelector((state) => state.home);

  useEffect(() => {
    dispatch(fetchHomeDataAction());
    dispatch(setHeaderConfigAction({ isFixed: true, topAlpha: true }));
  }, [dispatch]);

  return (
    <HomeWapper>
      <div className="bannner"></div>
      <div className="content">
        {/* 热门 */}
        {isEmptyObject(discountInfo) && <Section data={discountInfo} keyword={"dest_list"} width={"33.33%"} />}
        {/* 探索 */}
        {isEmptyObject(recommendInfo) && <Section data={recommendInfo} keyword={"dest_list"} width={"33.33%"} />}
        {/* 可能想去 */}
        {isEmptyObject(longForInfo) && <LongFor data={longForInfo}></LongFor>}
        {/* 高性价比 */}
        {isEmptyObject(goodPriceInfo) && <Section data={goodPriceInfo} />}
        {/* 高分好评 */}
        {isEmptyObject(highScoreInfo) && <Section data={highScoreInfo} />}
        {/* plus */}
        {isEmptyObject(plusInfo) && <Section data={{ ...plusInfo, name: "plus" }} width={"20%"} />}
      </div>
    </HomeWapper>
  );
});

export default Home;
